<!--
  Field component for FluentUI Web Components
-->
<script lang="ts" setup>
import { ref } from 'vue';

type LabelPosition = 'above' | 'after' | 'before';

// Define props with TypeScript
withDefaults(
  defineProps<{
    /**
     * The position of the label relative to the input.
     * Valid values are 'above', 'before', or 'after'
     */
    labelPosition?: LabelPosition;
  }>(),
  {
    labelPosition: 'above',
  },
);

// Define slots
defineSlots<{
  default?: () => any;
  end?: () => any;
  label?: () => any;
  message?: () => any;
  start?: () => any;
}>();

// Create a reference to the field element
const fieldRef = ref<HTMLElement | null>(null);
</script>

<template>
  <fluent-field ref="fieldRef" :label-position="labelPosition" v-bind="$attrs">
    <!-- Pass through default slot for input component -->
    <slot></slot>

    <!-- Pass through slots with modern syntax -->
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="label">
      <slot name="label"></slot>
    </span>

    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="start">
      <slot name="start"></slot>
    </span>

    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="end">
      <slot name="end"></slot>
    </span>

    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="message">
      <slot name="message"></slot>
    </span>
  </fluent-field>
</template>
